<style scope>
.v-note-wrapper{
    z-index:901 !important;
}
</style>

<template>
    <div>
        <Modal
            v-model="submitModule"
            title="完善以下信息"
            @on-ok="submit"
            >
            <Form :label-width="80">
                <FormItem label="文章标题">
                    <Input v-model="article.title" placeholder="标题"></Input>
                </FormItem>
                <FormItem label="分类标签">
                    <Input v-model="article.tags" placeholder="标签"></Input>
                </FormItem>
                <FormItem>
                    <RadioGroup v-model="isPublish">
                        <Radio label='yes'>
                            <span>发布文章</span>
                        </Radio>
                        <Radio label='no'>
                            <span>存到草稿箱</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
        <mavon-editor ref=md @change="$change" @save="$save" @imgAdd="$imgAdd" @imgDel="$imgDel" placeholder='# 此处键入标题 #' code_style="agate"/>
    </div>
    
</template>

<script>
    import Qs from 'qs'
    export default{
        name:'Add',
        data(){
            return{
                submitModule:false,
                loding:false,
                article:{
                    markdown:'',
                    tags:'',
                    title:'',
                    html:''
                },
                isPublish:'yes'
            }
        },
        methods:{
            $change(markdown,html){
                this.article.markdown=markdown;
                this.article.html=html;
            },
            $save(){
                if(!(this.article.markdown==='')){
                    this.submitModule = !this.submitModule;
                }else{
                    this.$Modal.info({
                        title: '内容不完整',
                        content: '<p>请将文章内容填写完整</p>'
                    })
                }
            },
            submit(){
                if(!(this.article.markdown===''||this.article.tags===''||this.article.title==='')){
                    this.loding =!this.loding;
                    this.article.sessionID=this.$cookie.get('sessionID');
                    const that = this;
                    if(this.isPublish==='yes'){
                        this.$http.post(that.surl+'addarticle',Qs.stringify(that.article),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                        .then(function(response){
                            that.loding = !that.loding;
                            if(response.data===true){
                                that.$Message.success('发布成功');
                                that.$router.push('/admin/home');
                            }else{
                                that.$Message.error('发布失败');
                            };
                        })
                        .catch(function(error){
                            that.loding = that.loding;
                            that.$Message.error('发布失败');
                        });
                    }else{
                        delete that.article.html;
                        this.$http.post(that.surl+'adddraft',Qs.stringify(that.article),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                        .then(function(response){
                            that.loding = !that.loding;
                            if(response.data===true){
                                that.$Message.success('添加到草稿箱成功');
                                that.$router.push('/admin/home');
                            }else{
                                that.$Message.error('添加到草稿箱失败');
                            };
                        })
                        .catch(function(error){
                            that.loding = that.loding;
                            that.$Message.error('添加到草稿箱失败');
                        });
                    }
                    
                }else{
                    this.$Modal.info({
                        title: '内容不完整',
                        content: '<p>请将内容填写完整</p>'
                    })
                }
            },
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
                // 第一步.将图片上传到服务器.
               const formdata = new FormData();
               formdata.append('image', $file);
               const that = this;
               this.$http({
                   url: this.surl+'image?sessionID='+that.$cookie.get('sessionID'),
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((response) => {
                   this.$refs.md.$img2Url(pos, response.data);
               })
            },
            $imgDel(filename){
                this.$refs.md.$refs.toolbar_left.$imgDelByFilename(filename);
            }
        }
    }
</script>